import React, { useEffect, useRef } from "react"
import * as echarts from 'echarts'
import { px } from "../px"
import { baseEchartsOptions } from "../shared/base-echarts-options"
import { createChartsOptions } from "../shared/create-echarts-options"
export const Chart2 = () => {
    const divRef = useRef(null)
    const myEcharts = useRef(null)
    let x = (data) => {
       

        var option = {
            ...baseEchartsOptions,

            xAxis: {
                type: 'value',
                boundaryGap: [0, 0.01],
                axisLabel: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                splitLine: {
                    show: false
                },
            },

            yAxis: {
                type: 'category',
                data: data.map(i => i.name),
                axisLine: {
                    show: true,
                    symbolSize: [0, 20],
                },
                axisLabel: {
                    fontSize: px(12),
                    formatter(val) {
                        return val.replace('公安局', '\n公安局');
                    }
                },
                axisTick: { show: false },
            },
            series: [
                {
                    name: '2011',
                    type: 'bar',
                    data: data.map(i => i[2011]),
                    // 设置渐变颜色
                    itemStyle: {
                        color: {
                            type: 'linear', // 线性渐变
                            x: 0,
                            y: 0,
                            x2: 1,
                            y2: 0,
                            colorStops: [{
                                offset: 0,
                                color: '#1f32fa' // 0%处的颜色为红色
                            }, {
                                offset: 1,
                                color: '#0b99fb' // 100%处的颜色为蓝
                            }]
                        }
                    }
                },
                {
                    name: '2012',
                    type: 'bar',
                    data: data.map(i => i[2012]),
                    // 设置渐变颜色
                    itemStyle: {
                        color: {
                            type: 'linear', // 线性渐变
                            x: 0,
                            y: 0,
                            x2: 1,
                            y2: 0,
                            colorStops: [{
                                offset: 0,
                                color: '#b92ae8' // 0%处的颜色为红色
                            }, {
                                offset: 1,
                                color: '#626ede' // 100%处的颜色为蓝
                            }]
                        }
                    }
                },

            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myEcharts.current.setOption(createChartsOptions(option));
    }
    let data = [
        { name: '城关区公安局', 2011: '3', 2012: '6' },
        { name: '七里河区公安局', 2011: '6', 2012: '2' },
        { name: '西固区公安局', 2011: '2', 2012: '7' },
        { name: '安宁区公安局', 2011: '7', 2012: '6' },
        { name: '红古区公安局', 2011: '5', 2012: '4' },
        { name: '永登县公安局', 2011: '4', 2012: '5' },
        { name: '皋兰县公安局', 2011: '6', 2012: '1' },
        { name: '榆中县公安局', 2011: '8', 2012: '2' },
        { name: '新区公安局', 2011: '1', 2012: '6' },
    ]

    useEffect(() => {
        setInterval(() => {
            let newData = [
                { name: '城关区公安局', 2011: Math.random() * 12, 2012: Math.random() * 10 },
                { name: '七里河区公安局', 2011: '6', 2012: '2' },
                { name: '西固区公安局', 2011: Math.random() * 5, 2012: Math.random() * 8 },
                { name: '安宁区公安局', 2011: '7', 2012: '6' },
                { name: '红古区公安局', 2011: Math.random() * 5, 2012: Math.random() * 4 },
                { name: '永登县公安局', 2011: '4', 2012: '5' },
                { name: '皋兰县公安局', 2011: '6', 2012: '1' },
                { name: '榆中县公安局', 2011: '8', 2012: '2' },
                { name: '新区公安局', 2011: '1', 2012: '6' },
            ]
            x(newData)
        }, 2000)
    }, [])
    useEffect(() => {
        // 指定图表的配置项和数据
        myEcharts.current = echarts.init(divRef.current)
        x(data)
    }, [])
    return (
        <div className='bordered 破获排名'>
            <h2>案件破获排名</h2>
            <div className='chart' ref={divRef}></div>
            <div className="legend">
                <span className="first" /> 破案排名1
                <span className="second" /> 破案排名2
            </div>
        </div>
    )
}